<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>简单计算器</title>
  <script src="../js/vue.js"></script>
</head>

<body>
  <div id="app">
    <!-- 第一个输入框，用于输入第一个数字，使用 v-model 双向绑定 num1 数据 -->
    <input type="number" v-model="num1" />
    <!-- 选择操作符的下拉菜单，使用 v-model 双向绑定 operator 数据 -->
    <select v-model="operator">
      <option value="+">+</option>
      <option value="-">-</option>
      <option value="*">*</option>
      <option value="/">/</option>
    </select>
    <!-- 第二个输入框，用于输入第二个数字，使用 v-model 双向绑定 num2 数据 -->
    <input type="number" v-model="num2" />
    <!-- 点击计算按钮触发 calculate 方法进行计算 -->
    <button @click="calculate">计算</button>
    <!-- 显示计算结果 -->
    <p>结果: {{result}}</p>
  </div>

  <script>
    const app = Vue.createApp({
      data() {
        /* 定义数据，包括输入的两个数字 num1 和 num2、选择的操作符 operator 以及计算结果 result */
        return {
          num1: 0,
          num2: 0,
          operator: '+',
          result: 0
        };
      },
      methods: {
        calculate() {
          /* 根据选择的操作符进行相应的计算，并更新结果 */
          switch (this.operator) {
            case '+':
              this.result = this.num1 + this.num2;
              break;
            case '-':
              this.result = this.num1 - this.num2;
              break;
            case '*':
              this.result = this.num1 * this.num2;
              break;
            case '/':
              if (this.num2!== 0) {
                this.result = this.num1 / this.num2;
              } else {
                this.result = '除数不能为 0';
              }
              break;
          }
        }
      }
    });

    app.mount('#app');
  </script>
</body>

</html>